<!-- eslint-disable vue/multi-word-component-names -->
<!-- 全部宠物列表组件 -->
<template>
  <div class="pet-list-container">
    <!-- 宠物项 -->
    <div class="pets-container">
      <div class="pets-item" v-for="(pet, index) in paginatedPetsList" :key="index" @click="goToDetail(pet.petId)">
        <!-- <img :src="pet.pet_image" alt="宠物图片" class="pet-img"> -->
        <img :src="pet.coverImage" alt="宠物图片" class="pet-img">
        <div class="pet-info">
          <div class="name">宠物名字：{{ pet.petName }}</div>
          <div class="breed">品种：{{ pet.breed }}</div>
          <div class="age">年龄: {{ pet.age }}</div>
        </div>
      </div>
    </div>
    
    <!-- 分页器 -->
    <div class="pagination-container">
      <!-- 上一页按钮 -->
      <span v-if="currentPage > 1" class="pagination-button" @click="prevPage">上一页</span>
      <span v-for="page in totalPages" :key="page" :class="{
        'pagination-button': true,
        'active': page === currentPage,
        'disabled': page === currentPage && (currentPage === 1 || (currentPage * itemsPerPage) >= PetsList.length)
      }" @click="() => changePage(page)">
        {{ page }}
      </span>
      <span v-if="(currentPage * itemsPerPage) < PetsList.length" class="pagination-button" @click="nextPage">下一页</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getPetListAPI } from "@/api/pet"
import { onMounted, ref, computed } from "vue"
import { useRouter } from "vue-router"

const router = useRouter();

// 跳转到宠物详情页面
const goToDetail = (petId) => {
  router.push(`/petdetail/${petId}`);
};
// 存储宠物列表数据
const PetsList = ref([])


// 当前页码，初始为1
const currentPage = ref(1)
// 每页显示的宠物项数量
const itemsPerPage = 8
// 计算总页数
const totalPages = computed(() => Math.ceil(PetsList.value.length / itemsPerPage))
// 计算当前页显示的宠物项数据
const paginatedPetsList = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  return PetsList.value.slice(startIndex, endIndex)
})

// 请求宠物列表数据
const getPetList = async () => {
  const res = await getPetListAPI()
  PetsList.value = res.data.items
  // console.log(PetsList.value)
}

onMounted(() => {
  getPetList()
})

// 下一页方法
const nextPage = () => {
  if ((currentPage.value * itemsPerPage) < PetsList.value.length) {
    currentPage.value++
  }
}

// 上一页方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

// 页码点击跳转方法
const changePage = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}


</script>

<style>
.pet-list-container {
  /* 宠物项的container的宽高 */
  width: 1200px;
  height: 700px;
  /* 分页器位置 */
  position: relative;
  /* border: 1px solid red; */
}

/* 宠物列表框 */
.pets-container {
  display: flex;
  flex-wrap: wrap;
  /* 宠物项间距 */
  gap: 20px;
}

.pets-item {
  /* 每行三个间距，间距总和：3*gap=60px */
  /* 每行显示四个，所以每个宠物项宽度为 (100% - 间距总和) / 4 */
  width: calc((100% - 60px) / 4);
  margin-bottom: 10px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.pets-item:hover {
  box-shadow:0 0 20px rgba(0, 0, 0, 0.2);
  /* 鼠标悬浮时的阴影效果 */
}

.pet-img {
  width: 100%;
  height: 225px;
  display: block;
}

.pet-info {
  padding: 10px;
}

.name {
  font-size: 14px;
  color: #999;
}

.breed {
  font-size: 14px;
  color: #999;
}

.age {
  font-size: 14px;
  color: #999;
}

/* 分页器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* 分页器位置：设置为右下角 */
  position: absolute;
  right: 10px;
  bottom: 10px;

}

.pagination-button {
  padding: 5px 10px;
  margin-right: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}

.pagination-button.active {
  background-color: #333;
  color: white;
}

.pagination-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>